<template>
  <div v-if="Object.keys(goods).length != 0" class="base-info">
    <!-- 标题 -->

    <div class="info-title">{{ goods.title }}</div>
    <div class="info-price">
      <span class="n-ptice">{{ goods.newPrice }}</span>
      <span class="o-ptice">{{ goods.oldPrice }}</span>
      <span v-if="goods.discount" class="discount">{{ goods.discount }}</span>
    </div>
    <div class="info-other">
      <span>{{ goods.columns[0] }}</span>
      <span>{{ goods.columns[1] }}</span>

      <span>{{ goods.services[goods.services.length - 1].name }}</span>
    </div>
    <!--  -->
    <div class="info-service">
      <span v-for="index in goods.services.length - 1" :key="index">
        <img :src="goods.services[index - 1].icon" alt="" />
        <span>{{ goods.services[index - 1].name }}</span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailBaseInfo",
  props: {
    goods: {
      type: Object
    }
  }
};
</script>

<style lang="less" scoped>
.base-info {
  box-sizing: border-box;
  padding: 1rem;
  background: #fff;
  .info-title {
    font-weight: 700;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .info-price {
    .n-ptice {
      font-weight: 700;
      font-size: 1.5rem;
      color: var(--color-high-text);
    }
    .o-ptice {
      font-size: 0.9rem;
      text-decoration: line-through;
      margin-left: 1rem;
    }
    .discount {
      font-size: 0.5rem;
      padding: 0.1rem 0.2rem;
      background: orange;
      margin-left: 0.5rem;
      color: #fff;
      border-radius: 0.5rem;
    }
  }
  .info-other {
    display: flex;
    text-align: center;
    margin-top: 1rem;
    color: #999;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
    > span {
      flex: 1;
      font-size: 0.8rem;
      &:first-child {
        text-align: left;
      }
      &:last-child {
        text-align: right;
      }
    }
  }
  .info-service {
    display: flex;
    text-align: center;
    margin-top: 1rem;
    color: #999;
    padding-bottom: 0.5rem;

    > span {
      img {
        width: 0.8rem;
        vertical-align: middle;
        margin-right: 0.1rem;
      }
      flex: 1;
      font-size: 0.8rem;
      &:first-child {
        text-align: left;
      }
      &:last-child {
        text-align: right;
      }
    }
  }
}
</style>
